<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: flex-start;">
			<view style="padding: 0 44rpx;box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="title">找回密碼</view>
		</view>
		<view class="form-table">
			<view class="item-mobile">
				<view class="code" @click="changeCode">
					<view>+{{code}}</view>
					<view class="code-image">
						<image src="/static/images/icon/down-icon.png"></image>
					</view>
				</view>
				<view class="mobile-input">
					<u-input 
						name="mobile" 
						type="number" 
						placeholder="請輸入手機號碼" 
						v-model="mobile" 
						border="none" 
						:clearable="true"
						@input="checkEmpty"
					></u-input>
				</view>
			</view>
			<view class="item-password" style="margin-top: 66rpx;">
				<u-input 
					name="sms" 
					placeholder="輸入驗證碼" 
					v-model="sms" 
					border="none"
					@input="checkEmpty"
				>
					<template slot="suffix">
						<u-code
							ref="uCode"
							@change="codeChange"
							@end="handleCountdownEnd"
							:seconds="seconds"
							startText="寄送驗證碼"
							endText="寄送驗證碼"
							changeText="寄送驗證碼(X)"
							:keepRunning="true"
						></u-code>
						<u-button
							@tap="getCode"
							:text="tips"
							:class="{'custom-style':isSendCode,'custom-style-disable':!isSendCode}"
						></u-button>
					</template>
				</u-input>
			</view>
			<view class="item-password" :class="{'error-message-active':showPswError}">
				<input name="password"
					placeholder="設定新密碼" 
					v-model="password" 
					border="none"
					@input="checkEmpty"
					:password="showPassword" 
					placeholder-style="color:#c0c4cc" 
					placeholder-class="custom-placeholder" />
				<image class="item-password-img" v-if="!showPassword" @click="changePassword" src="/static/images/icon/eyes.png" />
				<image class="item-password-img" v-if="showPassword" @click="changePassword" src="/static/images/icon/eyes-closed.png"/>
			</view>
			<view class="error-message-password" v-if="showPswError">
				8-20位密碼，需包含至少一個大寫字母、一個數字
			</view>
			<view class="item-password" :class="{'error-message-active':showPsw2Error}">
				<input name="password2"
					placeholder="再次輸入新密碼" 
					v-model="password2" 
					border="none" 
					@input="checkEmpty"
					:password="showPassword2" 
					placeholder-style="color:#c0c4cc" 
					placeholder-class="custom-placeholder" />
				<image class="item-password-img" v-if="!showPassword2" @click="changePassword2" src="/static/images/icon/eyes.png" />
				<image class="item-password-img" v-if="showPassword2" @click="changePassword2" src="/static/images/icon/eyes-closed.png"/>
			</view>
			<view class="error-message-password" v-if="showPsw2Error">
				兩次輸入密碼不一致
			</view>
			
		</view>
		<view class="form-btn">
			<view :class="{'submit-btn': isInputEmpty, 'submit-btn-active': !isInputEmpty }" @click="sumbit" >
				確認
			</view>
		</view>
		<custom-toast ref="toast" :title="toastMessage" image="/static/images/icon/success-circle.png" position="center" />
	</view>
</template>

<script>
	import { checkMessage, resetpwd } from '@/config/api.js';
	
	export default {
		data() {
			return {
				code: '886',
				mobile:'',
				sms:'',
				seconds: 60,
				tips:'寄送驗證碼',
				password:'',
				password2:'',
				isInputEmpty:true,
				text:'寄送驗證碼',
				isSendCode:true,
				showPassword:true,
				showPassword2:true,
				showPswError:false,
				showPsw2Error:false,
				toastMessage:''
			}
		},
		onLoad() {

		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				
				if( this.mobile.trim() === '' ){
					uni.showModal({
						content: '請輸入手機號',
						confirmText:'確認',
						showCancel:false,
						confirmColor:'#007AFF',
						success: function (res) {
							
						}
					});
					return;
				}
				
				let that = this;
				let params = {
					code:this.code,
					mobile:this.mobile
				}
				
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					// uni.showLoading({
					// 	title: '正在寄送驗證碼'
					// })
				 //  setTimeout(() => {
					// uni.hideLoading();
					// // 这里此提示会被this.start()方法中的提示覆盖
					// uni.$u.toast('验证码已发送');
					// // 通知验证码组件内部开始倒计时
					// this.$refs.uCode.start();
				 //  }, 1000);
				 
				
					checkMessage(params).then((res) => {
						console.log(res)
						//success
						
						uni.hideLoading();
						that.toastMessage = '驗證碼已寄送';
						this.$refs.toast.show();
						//啟動倒計時
						that.isSendCode = false;
						that.$refs.uCode.start();
					
					}).catch((e) =>{
						uni.showModal({
							title: '發送失败',
							content: '手機號碼有誤，請檢查後再試',
							confirmText:'確認',
							showCancel:false,
							confirmColor:'#007AFF',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.navigateBack();
								}
							}
						});
						console.log(e)
					})
				 
				} else {
				  uni.$u.toast('倒計時結束後重試');
				}
			},
			change(e) {
				console.log('change', e);
			},
			// 倒计时结束回调
			handleCountdownEnd() {
				console.log('倒计时已结束');
				// 执行逻辑：例如更新按钮文本、允许重新发送等
				this.isSendCode = true;
			},
			checkEmpty(){
				if( this.mobile != '' && this.sms != '' && this.password != '' && this.password2 != '' ){
					this.isInputEmpty = false;
				}else{
					this.isInputEmpty = true;
				}
			},
			changePassword(){
				this.showPassword = !this.showPassword;
			},
			changePassword2(){
				this.showPassword2 = !this.showPassword2;
			},
			sumbit(){
				this.showPswError = false;
				this.showPsw2Error = false;
				if(this.mobile.trim() == ''){
					console.log('mobile')
					return;
				}
				if( !uni.$u.test.code(this.sms, 4) ){
					uni.showModal({
						title: '提示',
						content: '驗證碼位數不正確',
						confirmText:'確認',
						showCancel:false,
						confirmColor:'#007AFF',
						success: function (res) {
							
						}
					});
					return;
				}
				
				if( !this.validatePassword(this.password) ){
					this.showPswError = true;
					return;
				}
				if( this.password != this.password2 ){
					this.showPsw2Error = true;
					return;
				}
				
				let that = this;
				let params = {
					code:this.code,
					mobile:this.mobile,
					newpassword:this.password,
					confirmpassword:this.password2,
					captcha:this.sms
				};
				
				resetpwd(params).then((res) => {
					console.log(res)
					//success
					that.toastMessage = '密碼已變更,請重新登錄';
					this.$refs.toast.show();
					setTimeout(function(){
						uni.navigateBack();
					},1500);
					
				
				}).catch((e) =>{
					uni.showModal({
						title: '發送失败',
						content: '手機號碼有誤，請檢查後再試',
						confirmText:'確認',
						showCancel:false,
						confirmColor:'#007AFF',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateBack();
							}
						}
					});
					console.log(e)
				})
			},
			changeCode(){
				let that = this;
				uni.navigateTo({
					url: '/pages/index/tel',
					events: {
						// 定义接收事件
						acceptData: (data) => {
							console.log('code:', data);
							that.code = data.data;
						}
					},
					success: (res) => {
						// 向B页面传递初始数据（可选）
						// res.eventChannel.emit('initData', { type: 1 });
					}
				});
			},
			validatePassword(password) {
			  // 正则规则：8-20位，至少1个大写字母和1个数字，允许其他字符（如小写字母、符号）
			  const regex = /^(?=.*[A-Z])(?=.*\d)[\w\W]{8,20}$/;
			  return regex.test(password);
			},
			goBack(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.body{
		width: 100%;
		margin-top: 48rpx;
		text-align: center;
	}
	.title{
		color: #1E232C;
		font-size: 60rpx;
		font-weight: 600;
		font-family: Roboto, Roboto;
	}
	.info{
		color: #323438;
		font-size: 32rpx;
		margin-top: 20rpx;
	}
	.form-table{
		width: 638rpx;
		margin-top: 56rpx;
		padding: 0 56rpx;
	}
	.item-mobile{
		box-shadow: inset 0rpx -2rpx 0rpx 0rpx rgba(18,18,29,0.1);
		display: flex;
		justify-content: flex-start;
		padding-bottom: 28rpx;
	}
	.code{
		display: flex;
		justify-content: flex-start;
	}
	.code-image{
		padding-top: 5rpx;
	}
	.code image{
		width: 32rpx;
		height: 32rpx;
		margin-left: 16rpx;
	}
	.mobile-input{
		margin-left: 16rpx;
	}
	.form-btn{
		margin-top: 48rpx;
		width: 100%;
	}
	.submit-btn{
		margin: 0 auto;
		width: 600rpx;
		height: 96rpx;
		background: #F7F8F9;
		box-shadow: 0rpx 4rpx 0rpx 0rpx rgba(0,0,0,0.02);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #E5E6E8;
		text-align: center;
		line-height: 96rpx;
		font-size: 32rpx;
		color: #BEC0C5;
	}
	.submit-btn-active{
		margin: 0 auto;
		width: 600rpx;
		height: 96rpx;
		background: #27C5D6;
		box-shadow: 0rpx 4rpx 0rpx 0rpx rgba(0,0,0,0.04);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #27C5D6;
		text-align: center;
		line-height: 96rpx;
		font-size: 32rpx;
		color: #fff;
	}
	.item-password{
		margin-top: 80rpx;
		box-shadow: inset 0rpx -2rpx 0rpx 0rpx rgba(18,18,29,0.1);
		padding-bottom: 28rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.item-password-img{
		width: 44rpx;
		height: 44rpx;
	}
	.custom-style{
		font-size: 28rpx;
		color: #fff;
		background: #27C5D6;
		box-shadow: 0rpx 4rpx 0rpx 0rpx rgba(0,0,0,0.04);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #27C5D6;	
		padding: 14rpx 34rpx;
	}
	.custom-style-disable{
		width: 286rpx;
		font-size: 28rpx;
		color: #BEC0C5;
		background: #E5E6E8;
		box-shadow: 0rpx 4rpx 0rpx 0rpx rgba(0,0,0,0.04);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #E5E6E8;	
		padding: 14rpx 34rpx;
	}
	.custom-placeholder{
		color: #c0c4cc‌!important;
	}
	.error-message-active{
		box-shadow: inset 0rpx -2rpx 0rpx 0rpx #FF3D43!important;
	}
	.error-message-password{
		color: #FF3D43;
		font-size:24rpx;
		display: flex;
		flex-direction: column;
		margin-top: 16rpx;
		// padding: 0 56rpx;
	}
	
</style>
